<template>
	<view class="lottery">
		<view class="topBox">
			<view class="info flex_space_b">
				<view class="integral">积分：<text class="text">{{this_user_info.user_score}}</text></view>
				<view class="record" @click="recordShow = true">获奖记录</view>
			</view>
			<view class="imageBox">
				<image class="image" src="../static/slogan_bg.png" mode="widthFix"></image>
				<view class="times">
					<view class="text">{{this_tips_msg}}</view>
					<image class="bg" src="../static/streamer.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		
		<almost-lottery :prize-list="prizeList" :ring-count="5" :duration="10" :canvas-width="canvasData.width" :canvas-height="canvasData.height"
		 :prize-index="prizeIndex" @reset-index="prizeIndex = -1" @draw-start="handleDrawStart" @draw-end="handleDrawEnd"
		 @finish="handleDrawFinish" v-if="prizeList.length" />
		 
		<view class="declare">
			<view class="title">
				<view class="text">活动说明</view>
				<image class="bg" src="../static/streamer.png" mode="widthFix"></image>
			</view>
			<view class="detail" style="color:#ffffff;">
				<view v-html="this_config.h_jieshao"></view>
			</view>
		</view>
		
		<u-popup v-model="recordShow" mode="center" width="620" border-radius="12" :closeable="true">
			<view class="recordBox">
				<view class="title">获奖记录</view>
				<scroll-view scroll-y class="list">
					<view class="item flex_space_b" v-for="(item, index) in jiang_log_list" :key="index">
						<view class="left">
							<view class="label">{{item.g_name}}</view>
							<view class="time">{{item.add_time}}</view>
						</view>
						<view class="right">{{item.status_text}}</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	var util = require('../../common/util.js');
	import AlmostLottery from '../components/almost-lottery.vue';
	import { clearCacheFile } from '@/almost-utils/almost-utils.js';
	export default {
		components: {
			AlmostLottery
		},
		data() {
			return {
				this_config:{},
				this_user_info:{},
				this_goods_list:[],
				jiang_log_list:[],
				this_tips_msg:'',
				// canvas 宽高
				canvasData: {
					width: 240,
					height: 240
				},
				// 奖品数据
				prizeList: [],
				// 中奖下标
				prizeIndex: -1,
				// 是否正在抽奖中
				prizeing: false,
				// 中奖类目名称
				targetName: '',
				// 奖品是否设有库存
				onStock: false,
				// 是否由前端控制概率，默认不开启
				onFrontend: false,
				// 权重随机数的最大值
				weightTotal: 0,
				// 权重数组
				weightArr: [],
				recordShow: false,
				jiang_msg:''
			}
		},
		onLoad() {
			// 模拟请求奖品数据
			this.loadData();
			//this.getPrizeList();
		},
		onUnload() {
			uni.hideLoading()
		},
		methods: {
			loadData: function() {
				// 加载数据
				var that = this;
				util.requestPost("api.php/Draw/index", {}, function(res) {
					that.this_user_info = res.data.this_user_info;
					that.this_goods_list = res.data.this_goods_list;
					that.prizeList = res.data.this_goods_list;
					that.this_config = res.data.this_config;
					that.jiang_log_list = res.data.jiang_log_list;
					that.this_tips_msg = res.data.this_tips_msg;
				}, true);
			},
			// 本次抽奖开始
			handleDrawStart() {
				let _this = this;
				if (this.prizeing) return
				this.prizeing = true
				this.targetName = ''

				let list = [..._this.prizeList]
				// 加载数据
				util.requestPost("api.php/Draw/confirmChoujiang", {}, function(res) {
					if(res.code == 1){
						let prizeId = res.data.jiang_id;
						for (let i = 0; i < list.length; i++) {
							let item = list[i];
							if (item.prizeId == prizeId) {
								// 中奖下标
								_this.prizeIndex = i
								break
							}
						}
						_this.jiang_msg = res.data.jiang_msg;
					}else{
						_this.prizeing = false;
					}
				}, false,{},true);
				
			},
			// 本次抽奖结束
			handleDrawEnd() {
				let _this = this;
				uni.showModal({
					title: '提示',
					content: _this.jiang_msg,
					showCancel:false
				});
				_this.loadData();
				this.prizeing = false;
				// 旋转结束后，可以执行拿到结果后的逻辑
				let prizeName = this.prizeList[this.prizeIndex].name
				this.targetName = prizeName === '谢谢参与' ? prizeName : `恭喜您，获得 ${prizeName}`
			},
			// 抽奖转盘绘制完成
			handleDrawFinish(res) {
				return false;
				uni.showToast({
					title: res.msg,
					duration: 2000,
					mask: true,
					icon: 'none'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.lottery {
	min-height: 100%;
	background-color: #37a810;
	padding-bottom: 32rpx;
	.topBox {
		.info {
			padding: 24rpx 0 24rpx 24rpx;
			.integral {
				color: #FFFFFF;
				font-size: 28rpx;
				.text {
					color: #FFD882;
				}
			}
			.record {
				padding: 8rpx 24rpx;
				background-color: rgba($color: #f06949, $alpha: 0.8);
				border-radius: 40rpx 0 0 40rpx;
				color: #FFFFFF;
			}
		}
		.imageBox {
			position: relative;
			.image {
				width: 750rpx;
			}
			.times {
				position: absolute;
				left: 50%;
				bottom: 40rpx;
				transform: translateX(-50%);
				.text {
					font-size: 24rpx;
					line-height: 56rpx;
					color: #FFFFFF;
					text-align: center;
					position: relative;
					z-index: 2;
					.number {
						color: #FFD882;
					}
				}
				.bg {
					width: 464rpx;
					position: absolute;
					left: 50%;
					top: 0;
					z-index: 1;
					transform: translateX(-50%);
				}
			}
			
		}
	}
	
	.declare {
		margin-top: 80rpx;
		.title {
			position: relative;
			.text {
				font-size: 24rpx;
				line-height: 48rpx;
				color: #FFD882;
				text-align: center;
				position: relative;
				z-index: 2;
			}
			.bg {
				width: 384rpx;
				position: absolute;
				left: 50%;
				top: 0;
				z-index: 1;
				transform: translateX(-50%);
			}
		}
		.detail {
			margin-top: 32rpx;
			padding: 0 32rpx;
			color: #999;
			.text {
				font-size: 24rpx;
				color: #999;
				margin-top: 8rpx;
			}
		}
	}
}

.recordBox {
	padding: 0 20rpx;
	.title {
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		line-height: 95rpx;
	}
	.list {
		max-height: 400rpx;
		.item {
			padding: 20rpx 0;
			border-bottom: 1rpx solid #EEEEEE;
			.left {
				.label {
					font-size: 28rpx;
					color: #333333;
				}
				.time {
					font-size: 24rpx;
					color: #999999;
				}
			}
			.right {
				font-size: 28rpx;
				color: #666666;
			}
		}
	}
}
</style>
